<template>
    <div id="audit">
        <!-- 头部 -->
        <div class="title">
            <span>入驻审核</span>
        </div>

        <!-- 搜索 -->
        <div id="headerBox" class="clear">
            <el-input
                placeholder="请输入企业名称,负责人姓名、电话查询"
                v-model="searchValue"
                clearable
                prefix-icon="el-icon-search"
            ></el-input>
            <el-button type="primary" plain id="serviceSearch" @click="serviceSearch">查询</el-button>
            <el-button type="primary" plain @click="reset">重置</el-button>
        </div>

        <!-- 表格 -->
        <el-table
            border
            :data="showTableData"
            tooltip-effect="light"
            style="width: 100%"
            height="420"
        >
            <el-table-column prop="name" label="企业名称"></el-table-column>
            <el-table-column prop="location" label="注册地址"></el-table-column>

            <el-table-column prop="postbox" label="登录账号"></el-table-column>
            <el-table-column prop="boss" label="负责人姓名"></el-table-column>
            <el-table-column prop="bossNumber" label="负责人电话"></el-table-column>
            <el-table-column prop="regTime" label="入驻申请时间"></el-table-column>

            <el-table-column label="操作">
                <!-- slot-scope="scope" 拿渲染这一行的数据 -->
                <template slot-scope="scope">
                    <el-button type="info" plain @click="goAuditDeatil(scope.row)">详情</el-button>

                    <el-button type="success" plain @click="agreen(scope.row)">同意</el-button>
                    <el-button type="danger" plain @click="refuse(scope.row)">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    name: "Audit",
    data() {
        return {
            addressHttp: "http://localhost:8088",
            searchValue: "" /* 存放查询输入的字 */,
            tableData: [],
            currentPage: 1 /* 当前页 */,
            pageSize: 5 /* 每一页的条数 */,
        };
    },
    methods: {
        // 每页多少条数据被改变的时候触发的函数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
        },

        // 当前页改变的时候触发的函数
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },

        // 点击同意或拒绝时，当前switch的状态
        changeStatus(status, row) {
            console.log("当前开关状态", status);
            console.log("这一行的数据", row);
        },

        // 点击详情跳转至详情页
        goAuditDeatil(row) {
            this.$router.push({ name: "auditDetail", params: row });
        },

        // 渲染表格数据
        getAuditData() {
            this.$axios({
                url: this.addressHttp + "/platformResident/paginationQuery",
                method: "get",
            })
                .then((res) => {
                    // console.log(res);
                    if (res.code === 200) {
                        this.tableData = [...res.data];
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 点击查询
        serviceSearch() {
            console.log("查询被点击啦");
            console.log(this.searchValue);
            if (this.searchValue != "") {
                this.$axios({
                    url: this.addressHttp + "/platformResident/conditionQuery",
                    method: "get",
                    params: {
                        name: this.searchValue,
                    },
                })
                    .then((res) => {
                        console.log(res);
                        if (res.code === 200) {
                              this.$message({
                                type: "success",
                                message: "查询成功!",
                            });
                            this.tableData = [...res.data];
                            this.searchValue = "";
                        }else{
                             this.$message({
                                type: "warning",
                                message:'请正确输入',
                            });
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            } else {
                this.$message({
                    type: "warning",
                    message: "请输入查询内容!",
                });
            }
        },

        // 点击同意
        agreen(row) {
            console.log("同意", row.id);
            this.$confirm("确定同意该门店的入驻?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$axios({
                        url: this.addressHttp + "/platformResident/agree",
                        method: "post",
                        data: {
                            id: row.id,
                        },
                    })
                        .then((res) => {
                            console.log(res);

                            this.$message({
                                type: "success",
                                message: "审核成功!",
                            });

                            this.getAuditData();
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消审核",
                    });
                });
        },

        // 点击拒绝
        refuse(row) {
            console.log("拒绝", row.id);
            this.$confirm("确定拒绝该门店的入驻?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$prompt("请输入拒绝理由", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                    })
                        .then(({ value }) => {
                            this.$axios({
                                url:
                                    this.addressHttp +
                                    "/platformResident/refuse",
                                method: "post",
                                data: {
                                    id: row.id,
                                    auditDesc: value,
                                },
                            })
                                .then((res) => {
                                    console.log(res);

                                    this.$message({
                                        type: "success",
                                        message: "审核成功!",
                                    });
                                    this.getAuditData();
                                })
                                .catch((err) => {
                                    console.log(err);
                                });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "取消输入",
                            });
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消审核",
                    });
                });
        },

        // 点击重置
        reset() {
            this.$message({
                type: "success",
                message: "重置成功!",
            });

           this.getAuditData();
        },
    },
    mounted() {},
    created() {
        this.getAuditData();
    },
    computed: {
        // 展示在表格里面的数据
        showTableData() {
            let start = (this.currentPage - 1) * this.pageSize;
            let end = start + this.pageSize;
            let data = this.tableData.slice(start, end);
            return data;
        },
    },
    watch: {},
};
</script>

<style scoped lang="less">
#audit {
    // 头部样式
    .title {
        width: 70px;
        height: 20px;
        padding-left: 10px;
        border-left: 4px solid #0082cc;
        font-size: 14px;
    }
    // 搜索盒子
    #headerBox {
        width: 490px;
        margin-top: 20px;
        // 查询输入框
        .el-input {
            width: 61.5%;
            float: left;
            /deep/.el-input__inner {
                width: 300px;
                height: 40px;
                border-radius: 4px;

                &::placeholder {
                    font-size: 10px;
                }
            }

            /deep/.el-input__icon {
                line-height: 35px;
            }
        }

        #serviceSearch {
            margin-left: 10px;
            width: 80px;
            height: 40px;
        }
    }

    // 表格
    .el-table {
        margin-top: 30px;
        /deep/.cell {
            text-align: center;
        }

        /deep/.el-table__cell {
            padding: 20px 0 20px 10px;
            text-align: center;

            // 操作的三个按钮
            .el-button {
                width: 26%;
                height: 30px;
                padding: 0;
                text-align: center;
                font-size: 12px;
            }
            .el-switch {
                width: 60%;
                // height: 30px;
                margin-left: 25px;
                float: left;
                line-height: 30px;
            }
        }

        /deep/.el-switch__core {
            margin-top: 10px !important;
        }
    }

    // 分页
    /deep/.el-pagination {
        text-align: center;
        margin-top: 20px;
    }
}
</style>
